<template>
  <div class="permanent-exhibition">
    <div class="content">
      <!-- 展览内容区域 -->
      <el-card class="exhibition-card">
        <template #header>
          <div class="card-header">
            <h2>青铜器文明展</h2>
            <el-tag type="success" size="small">常设展览</el-tag>
          </div>
        </template>
        <div class="card-content">
          <img 
            src="@/assets/carousel1.jpg"
            class="feature-image"
            alt="青铜器文明展"
          >
          <div class="text-content">
            <p>展示从夏商周到汉唐的青铜器发展历程，包含：</p>
            <ul>
              <li>司母戊鼎等国宝级文物</li>
              <li>青铜器铸造工艺演示</li>
              <li>多媒体互动体验区</li>
            </ul>
            <el-button 
              type="primary" 
              icon="el-icon-video-play"
              @click="openVirtualTour"
            >
              开启虚拟导览
            </el-button>
          </div>
        </div>
      </el-card>
      <!-- 可以添加更多展览卡片 -->
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    openVirtualTour() {
      this.$router.push('/virtual-tour/bronze');
    },
    scrollToTop() {
      window.scrollTo({
        top: 0,
        behavior: 'smooth'
      });
    }
  }
};
</script>

<style scoped>
.permanent-exhibition {
  position: relative;
  min-height: 100vh;
}

.content {
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin: 0 auto;
  padding: 20px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(5px);
}

.exhibition-card {
  margin-bottom: 20px;
  border: none;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #EBEEF5;
}

.card-header h2 {
  font-size: 18pt;
}

.card-content {
  display: flex;
  gap: 20px;
  margin-top: 15px;
}

.feature-image {
  width: 250px;
  height: 187.5px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
}

.text-content {
  flex: 1;
}

.text-content p {
  font-size: 12pt;
  margin-bottom: 10px;
}

.text-content ul {
  margin-bottom: 15px;
  padding-left: 20px;
}

.text-content li {
  font-size: 12pt;
  line-height: 1.6;
}

.el-button {
  font-size: 12pt;
}

@media (max-width: 768px) {
  .card-content {
    flex-direction: column;
  }
  
  .feature-image {
    width: 100%;
    height: 180px;
  }
  
  .text-content p,
  .text-content li {
    font-size: 11pt;
  }
}
</style>